<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
    *{margin: 0px;padding: 0px;}
    a{color: black;text-decoration: none;}
    body{font-family:  "宋体";background: url(images/2.jpg) no-repeat;background-size: 100%;color: black;}
    .now_login{font-size: 14px;float: right;}
    .btd_login{height: 38px;width: 50px;border: 1px solid silver;border-radius: 4px;font-size: 16px;cursor: pointer;margin-left: 10px;}
    #app1{width: 300px;margin:100px auto;}
    label{display: inline-block;width:70px;height: 38px;text-align: center;}
    .tiShi{font-size: 12px;color:red;margin:0 0 10px 70px;}
    .input{width: 200px;height: 38px;border-radius: 4px;}
    textarea{resize: none;border-radius: 4px;}
    .checkbox{font-size: 14px;margin-left: 20px;}
    #btd{width: 270px;height: 38px;border-radius: 5px;background:#5B8020;border: 1px solid  silver;color: white;font-size: 18px;;cursor: pointer;margin-top: 10px;}
    #successful{width: 300px;height: 200px;border: 1px solid silver;position: fixed;left: 50%;bottom: 50%;background:#D8D8D8;display: none;}
    #btn{width: 50px;height: 30px;display: inline-block;float: right;margin-right: 15px;}
</style>
<body>
<div id="app">
    <div id="successful">
        <h3 style="text-align: center;margin-top: 80px;margin-bottom: 40px;">注册成功，快去登录吧!</h3>
        <button id="btn" @click="close" >取消</button>
        <button @click="login" id="btn">登录</button>
    </div>
    <!-- <div class ="now_login">我已注册，现在就<button class="btd_login" @click="login">登录</button></div> -->
    <div id="app1">
    	<span class="tiShi">{{ tiShi.tishi3 }}</span><br>
        <label>用户名</label><input type="text" placeholder="请设置用户名"  v-model="userInfo.username" class="input" @blur="a"><br>
        <span class="tiShi">{{ tiShi.tishi1 }}</span><br>
        <label>设置密码</label><input type="password" placeholder="请设置登录密码" v-model="userInfo.password"class="input" @blur="b"><br>
        <span class="tiShi">{{ tiShi.tishi2 }}</span><br>
        <button id="btd" @click="flag" :disabled="btn">立即注册</button>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            isReturn:false,
            btn:false,
            tiShi:{
                tishi1:"",
                tishi2:"",
                tishi3:""
            },
            userInfo:{
                username:"",
                password:""
            }
        },
        methods: {
            //用户名称
            a:function() {
                this.tiShi.tishi1 = '';
                this.isReturn = true;
                var a = /^[a-z]+$/;//小写字母组成
                if (!this.userInfo.username) this.tiShi.tishi1 = '用户名不能为空';
                else if (!a.test(this.userInfo.username)) {
                    this.isReturn = true;
                    this.tiShi.tishi1 = "由小写字母组成"
                }
            },
            //密码
            b:function() {
                this.tiShi.tishi2 = '';
                this.isReturn = true;
                var p = /[a-zA-Z]\w[z0-9]/;
                if (!this.userInfo.password) {
                    this.isReturn = true;
                    this.tiShi.tishi2 = '密码不能为空';
                } else if (!p.test(this.userInfo.password)) {
                    this.isReturn = true;
                    this.tiShi.tishi2 = "由字母+数字组成，字母开头"
                }
            },
            flag:function() {
                this.tiShi.tishi1 = '';
                this.tiShi.tishi2 = '';
                this.isReturn = false;
                //用户名
                var a = /^[a-z]+$/;//小写字母组成
                if (!this.userInfo.username) {
                    this.tiShi.tishi1 = '用户名不能为空';
                    this.isReturn = true;
                } else if (!a.test(this.userInfo.username)) {
                    this.isReturn = true;
                    this.tiShi.tishi1 = "由小写字母组成"
                }
                //字母开头 ，由字母+数字组成
                var p = /[a-zA-Z]\w[z0-9]/;
                if (!this.userInfo.password) {
                    this.isReturn = true;
                    this.tiShi.tishi2 = '密码不能为空';
                } else if (!p.test(this.userInfo.password)) {
                    this.isReturn = true;
                    this.tiShi.tishi2 = "由字母+数字组成，字母开头"
                }
                //如果有这些提示就return
                if (this.tiShi.tishi || this.tiShi.tishi2) return;
                
                $.ajax({
                	url:"regist",
                	contentType: 'application/x-www-form-urlencoded;charset=utf-8',  
                	type:"POST",
                	dataType: "json",  
                	data:{username: this.userInfo.username, password: this.userInfo.password},
                	success:function(res){
                		if(res.code==200){
                			var box = document.getElementById("successful");
                			box.style.display = 'block';
                		}else{
                			this.tiShi.tishi3=res.msg;
                		}
                	}
                });
            },
            login:function() {
            	window.location.href="login";
            },
            close:function(){
                var box = document.getElementById("successful");
                box.style.display = 'none';
            }
        }
    });
</script>
</html>